<template>
  <div class="article-section">
    <el-card
      v-for="(article, index) in articles"
      :key="index"
      class="article-card"
      @click="showArticle(index)"
    >
      <template #header>
        <h3 class="article-title">{{ article.title }}</h3>
        <div class="article-meta">
          <span>{{ article.authorName }}</span>
          <el-divider direction="vertical" />
          <span>{{ article.createdAt }}</span>
          <el-divider direction="vertical" />
          <el-icon><View /></el-icon>
          <span>{{ article.viewCount }}</span>
        </div>
      </template>
      <p class="article-summary">{{ article.summary }}</p>
      <!-- 点赞图标 -->
      <div class="article-meta">
      <div style="display: flex; align-items: center; gap: 5px" @click="likes++">
        <img src="@/img/赞.svg" alt="" style="width: 20px; height: 20px" />
        <span>{{ likes }}</span>
      </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import request from "@/components/utiles/request";
import { View } from "@element-plus/icons-vue";
import router from "@/router";
const likes = ref(null); // 点赞数


// 文章示例数据
const articles = ref([]);
onMounted(() => {
  getArticle();
});
// 跳转到文章详情
function showArticle(index) {
  const articleId = articles.value[index].id;
  console.log(articleId);

  // 跳转到文章详情页面
  router.push({ path: `/article/${articleId}` });
}
// 获取数据
async function getArticle() {
  const gain = await request.get("/article/selectArticle");
  console.log(gain.data);
  if (gain.data.code == 200) {
    articles.value = gain.data.data;
  }
}
defineExpose({
  getArticle,
});
</script>

<style scoped>
.article-card {
  margin-bottom: 20px;
}

.article-title {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 12px;
}

.article-summary {
  color: #666;
  line-height: 1.6;
}
</style>
